<template name="basics">
    <view>
        <scroll-view scroll-y class="page">
            <div class="pl_center">
                <div class="saveBtn" @click="saveInf()">
                    <img class="saveBtn_img" src="../../static/img_add_book.png" alt srcset />
                    <span>添加手册</span>
                </div>
            </div>
            <div class="page_dcenter">
                <div v-if="list.length==0" class="page_dcenter_null">
                    <img class="page_dcenter_null_img" src="../../static/img_null_bookbuilding.png" />
                    <div>暂无建档建册信息</div>
                </div>
                <div v-else class="page_dcenter_list">
                    <div class="page_dcenter_tip">温馨提示：一孕一册，若有多个手册，最后一个手册作为默认手册。</div>
                    <div class="page_card" v-for="(itm,index) in list" :key="index">
                        <div class="page_card_top">档案{{index+1}}</div>
                        <div class="card_body">
                            <div class="card_body_li">
                                <div class="body_li">
                                    <div class="body_label">
                                        预产期
                                        <span class="p_hid"></span>
                                    </div>：
                                    <div class="body_model">{{itm.childbirthTime||''}}</div>
                                </div>
                                <div class="body_li">
                                    <div class="body_label">
                                        孕周
                                        <span class="p_hid"></span>
                                    </div>：
                                    <div
                                        class="body_model"
                                    >{{(itm.status==1||itm.status==3)?'- - - -':(itm.week+'周 '+itm.day+'天')}}</div>
                                </div>
                            </div>
                            <div class="card_body_li">
                                <div class="body_li">
                                    <div class="body_label">
                                        末次月经
                                        <span class="p_hid"></span>
                                    </div>：
                                    <div
                                        class="body_model"
                                    >{{issubstring(itm.lastMenstrual)}}</div>
                                </div>
                                <div class="body_li">
                                    <div class="body_label">
                                        孕期状态
                                        <span class="p_hid"></span>
                                    </div>：
                                    <div class="body_model">{{itm.status|isStatus}}</div>
                                </div>
                            </div>
                            <div class="card_body_li">
                                <div class="body_li">
                                    <div class="body_label">
                                        建档时间
                                        <span class="p_hid"></span>
                                    </div>：
                                    <div class="body_model">{{issubstring(itm.createTime)}}</div>
                                </div>
                                <div class="body_li">
                                    <div class="body_label">
                                        档案状态
                                        <span class="p_hid"></span>
                                    </div>：
                                    <div class="body_model">{{itm.state|isState}}</div>
                                </div>
                            </div>
                        </div>
                        <div class="page_card_bottom" @click="clickIndex(itm)">
                            <span class="weui-cell__ft_in-access"></span>查看档案
                        </div>
                    </div>
                </div>
            </div>
            <div style="height:100upx"></div>
        </scroll-view>
    </view>
</template>

<script>
const statusOptions = [
    { val: 0, display_name: "未分娩" },
    { val: 1, display_name: "已分娩" },
    { val: 2, display_name: "已转院" },
    { val: 3, display_name: "分娩终止" }
];
const stateOptions = [
    { val: 1, display_name: "建档中" },
    { val: 2, display_name: "待确认" },
    { val: 3, display_name: "已建档" }
];
// state (integer, optional): 档案状态（1、建档中 2、待审核 3、已建档） ,
// status (integer, optional): 分娩状态1：已分娩 0：未分娩 2：已转院 3：分娩终止 ,
export default {
    name: "basics",
    data() {
        return {
            list: [],
            TabCur: 1
        };
    },
    filters: {
        isStatus(status) {
            if (status || status == 0) {
                const statusStyle = statusOptions.reduce((acc, cur) => {
                    if (cur.val == status) {
                        acc = cur.display_name;
                    }
                    return acc;
                }, {});
                return statusStyle;
            } else {
                return "";
            }
        },
        isState(status) {
            if (status && status != " ") {
                const statusStyle = stateOptions.reduce((acc, cur) => {
                    if (cur.val == status) {
                        acc = cur.display_name;
                    }
                    return acc;
                }, {});
                return statusStyle;
            } else {
                return "";
            }
        }
    },
    mounted() {
        this.getGpregnantList();
    },
    
    methods: {
        
        issubstring(itm){
            if(itm){
                return itm.substring(0, 10)
            }else{
                return ''
            }
        },
        getGpregnantList() {
            const data = {
                hospitalId: uni.getStorageSync("hospital").id
            };
            // 孕妇档案列表
            var _this = this;
            _this.$ajaxs
                .get("/mobile/v1/pregnant/getGpregnantList")
                .then(res => {
                    if (res.status == 200) {
                        _this.list = res.content;
                    } else {
                        uni.showToast({
                            title: "请检查网络~",
                            icon: "none"
                        });
                    }
                })
                .catch(err => reject(err));
        },
        saveInf() {
            var _this = this;
            if (_this.list.length > 0) {
                if (_this.list[0].status == 0) {
                    uni.showToast({
                        title: "暂不能建档！",
                        icon: "none"
                    });
                } else {
                     uni.setStorage({
                            //存储到本地
                            key: "pregnantId",
                            data: _this.list[0].id
                        });
                    _this.$navTo.togo("../putOnRecord/info", { id: 0 });
                }
            } else {
                _this.$navTo.togo("../putOnRecord/info", { id: 0 });
            }

            // uni.navigateTo({
            //     url: "../putOnRecord/info",
            //     animationType: "pop-in",
            //     animationDuration: 200,

            // });
        },
        clickIndex(item) {
            var _this = this;
            _this.$navTo.togo("../putOnRecord/info", item);
        }
    }
};
</script>

<style scope lang="scss">
.page {
    height: 100vh;
    background: #f8f8f8;
}
.saveBtn {
    height: 80upx;
    text-align: center;
    line-height: 70upx;
    border: 1px solid #fa4d93;
    border-radius: 40upx;
    color: #fa4d93;
    font-size: 32upx;
    background: #fff;
    margin: 0 40upx;
    position: relative;
    vertical-align: inherit;
    span {
        vertical-align: middle;
    }
}
.pl_center {
    height: 160upx;
    padding: 40upx 0;
    background: #fff;
    .saveBtn_img {
        width: 32upx;
        height: 32upx;
        margin-right: 10upx;
        vertical-align: middle;
    }
}
.page_dcenter {
    .page_dcenter_null {
        padding-top: 180upx;
        text-align: center;
        .page_dcenter_null_img {
            height: 180upx;
            width: 162upx;
        }
        div {
            color: #999;
            font-size: 28upx;
            height: 40upx;
            line-height: 40upx;
        }
    }
    .page_dcenter_list {
        .page_dcenter_tip {
            height: 80upx;
            line-height: 80upx;
            padding-left: 40upx;
            color: #fa4d93;
            font-size: 20upx;
        }
        .page_card {
            background: #fff;
            font-size: 28upx;
            margin-bottom: 20upx;
            .page_card_top {
                height: 80upx;
                line-height: 80upx;
                color: #666;

                border-bottom: 1px solid #ddd;
                padding-left: 40upx;
            }
            .card_body {
                padding-left: 40upx;
                .card_body_li {
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    height: 80upx;
                    line-height: 80upx;
                    color: #666;
                    .body_li {
                        display: -webkit-box;
                        display: -ms-flexbox;
                        display: flex;
                        -webkit-box-flex: 1;
                        -ms-flex: 1;
                        flex: 1;
                        -webkit-box-align: center;
                        -ms-flex-align: center;
                        align-items: center;
                        .body_label {
                            width: 128upx;
                            height: 80upx;
                            text-align: justify;
                            text-justify: inter-ideograph;
                            .p_hid {
                                display: inline-block;
                                width: 100%;
                            }
                        }
                    }
                }
            }
            .page_card_bottom {
                height: 80upx;
                line-height: 80upx;
                padding-left: 40upx;
                color: #fa4d93;
                border-top: 1px solid #ddd;
                position: relative;
                .weui-cell__ft_in-access:after {
                    content: " ";
                    display: inline-block;
                    height: 6px;
                    width: 6px;
                    border-width: 2px 2px 0 0;
                    border-color: #fa4d93;
                    border-style: solid;
                    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
                    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
                    position: relative;
                    top: -2px;
                    position: absolute;
                    top: 50%;
                    margin-top: -4px;
                    right: 40upx;
                }
            }
        }
    }
}
</style>
